<template>
	<div>
		<el-row class="container">
			<!--头部-->
			<el-col :span="24" class="topbar-wrap">
				<div class="topbar-title" @click="onHome" style="cursor: pointer">
					<img src="../assets/logo-head.png" style="margin-left: 100%;padding-top: 15px;" />
				</div>
				<div class="topbar-account" style="padding-right: 40px;">
					<ChangeLang></ChangeLang>
				</div>
				<div class="topbar-account topbar-btn" v-on:click="profile" style="cursor: pointer">

					<img src="../assets/person-icon.png" style="vertical-align:middle;cursor: pointer;" />
					<span style="margin-left:10px;vertical-align:middle;">{{user.username}}</span>
					<img src="../assets/info-icon.png" />
				</div>

				<!--<div class="topbar-account" style="padding-right: 40px;">-->
					<!--<router-link to="videoConference" style="color: #F4F4F4; ">{{$t("header.videoConference")}}</router-link>-->
				<!--</div>-->

				<div class="topbar-account" style="padding-right: 40px;">
					<router-link to="persons" style="color: #F4F4F4; ">{{$t("header.faceRecognition")}}</router-link>
				</div>

				<div class="topbar-account" style="padding-right: 40px;">
					<router-link to="media" style="color: #F4F4F4; ">{{$t("header.imageRecognition")}}</router-link>
				</div>

			</el-col>
		</el-row>
		<el-row>

			<div v-show="isShow" class="box-card">
				<div class="img" @click="personinfo()">
					<img src="../assets/personinfo-icon.png" style="width: 60px;height: 60px">
					<p>{{$t("header.personInfo")}}</p>
				</div>
				<div class="img" @click="myorder()">
					<img src="../assets/wodedingdan.png" style="width: 60px;height: 60px">
					<p>{{$t("header.myOrder")}}</p>
				</div>
				<div class="img" @click="userManage()">
					<img src="../assets/wodequnzu.png" style="width: 60px;height: 60px">
					<p>{{$t("header.userManage")}}</p>
				</div>
				<div class="img" @click="device()">
					<img src="../assets/yonghuguanli.png" style="width: 60px;height: 60px">
					<p>{{$t("header.device")}}</p>
				</div>
				<div class="img" @click="logout()">
					<img src="../assets/logout-icon.png" style="width: 60px;height: 60px">
					<p>{{$t("header.logOut")}}</p>
				</div>
			</div>

		</el-row>
	</div>


</template>


<style scoped lang="scss">
	.dashboard-editor-container {
		padding: 100px;

		background-color: rgb(240, 242, 245);

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
		}
	}

	.container {
		position: absolute;
		top: 0px;

		width: 100%;

		.topbar-wrap {
			height: 52px;
			line-height: 40px;
			background: #000000;
			padding: 0px;

			.topbar-btn {
				color: #fff;
			}

			.topbar-logo {
				float: left;
				width: 59px;
				line-height: 26px;
			}

			.topbar-logos {
				float: left;
				width: 120px;
				line-height: 26px;
			}

			.topbar-logo img,
			.topbar-logos img {
				height: 40px;
				margin-top: 5px;
				margin-left: 2px;
			}

			.topbar-title {
				float: left;
				text-align: left;
				width: 200px;
				padding-left: 10px;
				border-left: 1px solid #000;
			}

			.topbar-account {
				float: right;
				padding-right: 5%;
				padding-top: 5px;
			}

			.userinfo-inner {
				cursor: pointer;
				color: #fff;
				padding-left: 10px;
				/* padding-top: 15px;*/
				font-size: 16px;
			}
		}

		.main {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			position: absolute;
			top: 50px;
			bottom: 0px;
			overflow: hidden;
		}

		aside {
			min-width: 50px;
			background: #333744;

			&::-webkit-scrollbar {
				display: none;
			}

			&.showSidebar {
				overflow-x: hidden;
				overflow-y: auto;
			}

			.el-menu {
				height: 100%;
				/*写给不支持calc()的浏览器*/
				height: -moz-calc(100% - 80px);
				height: -webkit-calc(100% - 80px);
				height: calc(100% - 80px);
				border-radius: 0px;
				background-color: #333744;
				border-right: 0px;
			}

			.el-submenu .el-menu-item {
				min-width: 60px;
			}

			.el-menu {
				width: 180px;
			}

			.el-menu--collapse {
				width: 60px;
			}

			.el-menu .el-menu-item,
			.el-submenu .el-submenu__title {
				height: 46px;
				line-height: 46px;
			}

			.el-menu-item:hover,
			.el-submenu .el-menu-item:hover,
			.el-submenu__title:hover {
				background-color: #7ed2df;
			}
		}

		.menu-toggle {
			background: #4A5064;
			text-align: center;
			color: white;
			height: 26px;
			line-height: 30px;
		}

		.content-container {
			background: #fff;
			flex: 1;
			overflow-y: auto;
			padding: 10px;
			padding-bottom: 1px;

			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}

	text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		color: #ffffff;
		background-color: #000000;
		opacity: 0.7;
		display: inline-block;
		position: absolute;
		left: 0;
		top: 52px;
		z-index: 9999;

	}

	.img {
		display: inline-block;
		margin-left: 139px;
		margin-bottom: 18px;
		margin-top: 10px;
		vertical-align: middle;

	}

	.dlog {
		width: 100%;
		color: #000000;
		//  background-color: #000000;
		opacity: 0.7;
		display: inline-block;
		z-index: 1;
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}
</style>


<script>
	import * as types from '../store/types'
	import api from '../axios'
	import ChangeLang from '@/components/changeLang.vue'

	export default {
		name: 'frame',
		components: {
			ChangeLang: ChangeLang,
		},
		data() {
			const item = {
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			};
			return {
				tableData: Array(20).fill(item),
				dialogVisible: true,
				isShow: false,
				user: ''
			}
		},
		mounted() {
			var user1 = JSON.parse(localStorage.getItem('userInfo'));
			if (!user1) {
				this.$message.error(this.$t('header.notLogin'));
				this.$router.push({
					path: '/login'
				});
				return;
			}
			this.user = user1;
		},
		methods: {
			handleClose(done) {
				this.$confirm(this.$t('header.confirmClose'))
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			profile: function() {
				this.isShow = !this.isShow;
			},
			device() {
				if (this.$route.path === '/device') {
					this.isShow = !this.isShow;
				}
				this.$router.push('/device');
			},
			userManage() {
				if (this.$route.path === '/user') {
					this.isShow = !this.isShow;
				}
				this.$router.push('/user');
			},
			personinfo() {
				if (this.$route.path === '/Person') {
					this.isShow = !this.isShow;
				}
				this.$router.push('/Person');
			},
			myorder() {
				if (this.user.id == -999) {
					if (this.$route.path === '/orderInfo') {
						this.isShow = !this.isShow;
					}
					this.$router.push('/orderInfo');
				} else {
					if (this.$route.path === '/home') {
						this.isShow = !this.isShow;
					}
					this.$router.push('/home');
				}

			},
			logout() {
				this.$store.dispatch('UserLogout')
				if (!this.$store.state.token) {
					this.$router.push('/login')
					this.$message({
						type: 'success',
						message: this.$t('header.logoutSuccess')
					})
				} else {
					this.$message({
						type: 'info',
						message: this.$t('header.logoutFail')
					})
				}
			},
			videoMeeting() {
				this.$router.push('/videoConference');
			},
			//返回主页
			onHome() {
				this.$router.push({
					path: '/home'
				})
			}
		}
	};
</script>
